<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.css" />
		<script type="text/javascript" src="../js/vue.min.js"></script>
	</head>
	
	<!--
    	按键修饰符：为指定唯一的 键 添加事件 
    		使用：   如 @keyup.enter  表示  enter 键抬起时响应的事件
    	1. 常用 按键修饰符：
    		https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
    	2. 通过指定 键的值 也可对 该键添加事件
    		如：F2 的值为 113  @keyup.113 表示 抬起 F2 响应的事件 
    		键值表：http://www.cnblogs.com/wuhua1/P/6686237.html
    	3.自定义 全局的按键修饰符：
    		如js中的代码
    -->
	
	<body>
		<div id="app">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">添加品牌</h3>
				</div>
				<div class="panel-body">
					<label>
						Id:<input type="text" v-model="id" class="form-control"/>
					</label>
					<label>
						Name:<input type="text" v-model="name" @keyup.F2="add" class="form-control"/>
					</label>
				</div>	
			</div>

			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>Id</th>
						<th>Name</th>
						<th>Ctime</th>
						<th>Option</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for='item in list' :key='item.id'>
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.ctime|dataFormat}}</td>
						<td><a href='#'>删除</a></td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script>
		//自定义 全局的按键修饰符
		// 如：F2的按键修饰符 为 F2
		Vue.config.keyCodes.F2=113;
		
		
		Vue.filter("dataFormat",function(dataStr){
			//console.log(dataStr)
			var dt=new Date(dataStr);
			
			/**
			 * SE6 后字符串首尾填充方法：
			 * 		首：String padStart(maxLengths,fileStr) 
			 * 		尾：String padEnd(maxLengths,fileStr) 
			 * 		参数说明：
			 * 			maxLengths:填充后字符串的长度
			 * 			fileStr:不足位进行填充的字符串
			 */
			var y=dt.getFullYear();
			var m=(dt.getMonth()+1).toString().padStart(2,'0');
			var d=dt.getDate().toString().padStart(2,'0');
			var hh=dt.getHours().toString().padStart(2,'0');
			var ss=dt.getSeconds().toString().padStart(2,'0');
			var mm=dt.getMinutes().toString().padStart(2,'0');
			
			//占位符 的使用： 
			return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
		})
		
		var vue = new Vue({
			el: "#app",
			data: {
				keyword:"",
				id:"",
				name:"",
				list:[{
					id: 1,
					name: '刘备',
					ctime: new Date()
				}, {
					id: 2,
					name: '关羽',
					ctime: new Date()
				}, {
					id: 3,
					name: '张飞',
					ctime: new Date()
				}]
			},
			methods: {
				add(){					 
					/*
					 * 注意：在Vue中，已经实现了数据的双向绑定,每当我们修改了
					 * 	date中的数据，Vue会默认监听到数据的改动，自动把最新的
					 * 数据，应用到页面上
					 * 
					 * 双向绑定的指令：
					 * 		v-model
					 * 		v-for
					 */
					var car={id:this.id,name:this.name,ctime:new Date()};
					this.list.push(car);
					this.id=this.name="";
				}
			}
		});
	</script>

</html>